import React from 'react';
import style from './css.css';
import $ from 'jquery';

export default class Modal extends React.Component {

    constructor(props) {
        super(props);
        this.showLayer = () => {
            var layer = $('#hw-layer'),
                layerwrap = layer.find('.hw-layer-wrap');
            layer.fadeIn();
            //屏幕居中
            layerwrap.css({
                'margin-top': -layerwrap.outerHeight() / 2
            });
        };

        this.hideLayer = () => {
            $('.hw-overlay').fadeOut();
        };

    }

    render() {
        let type,col="col-md-12 col-sm-12";
        if (this.props.type == 1) {
            type = <div className="col-md-3 col-sm-12 hw-icon">
                <i className="glyphicon glyphicon-info-sign"></i>
            </div>
            col ="col-md-9 col-sm-12";
        }
        return (
            <div className="hw-overlay" id="hw-layer">
                <div className="hw-layer-wrap">
                    <span className="glyphicon glyphicon-remove hwLayer-close" onClick={this.hideLayer}></span>
                    <div className="row">
                        {type}
                        <div className={col}>
                            {this.props.children}
                            <button className="btn btn-success hwLayer-ok" style={{display:"none"}}>确 定</button>
                            <button className="btn btn-warning hwLayer-cancel" style={{display:"none"}} onClick={this.hideLayer}>取 消</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}